<script setup>
import MapComponent from './components/MapComponent.vue'
import MenuComponent from './components/MenuComponent.vue'
import { ref } from 'vue'

const mapComponentRef = ref(null)

const handleImagesLoaded = (processedImages) => {
  if (mapComponentRef.value) {
    mapComponentRef.value.addMarkersToMap(processedImages)
  }
}

const handleDateRangeChanged = (dateRange) => {
  if (mapComponentRef.value) {
    mapComponentRef.value.handleDateRangeChange(dateRange)
  }
}

const handleClearAllMarkers = () => {
  if (mapComponentRef.value) {
    mapComponentRef.value.clearAllMarkers()
  }
}
</script>

<template>
  <div class="app-container">
    <div class="map-area">
      <MapComponent ref="mapComponentRef" />
    </div>
    <div class="menu-area">
      <MenuComponent 
        @images-loaded="handleImagesLoaded"
        @date-range-changed="handleDateRangeChanged"
        @clear-all-markers="handleClearAllMarkers" 
      />
    </div>
  </div>
</template>

<style>
.app-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.map-area {
  flex: 1;
  overflow: hidden;
}

.menu-area {
  height: 60px;
  background: #f5f5f5;
  border-top: 1px solid #ddd;
}
</style>
